{% extends 'base/base.html' %}

{% block title %}常见问题 - 盲盒商城{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row">
        <div class="col-md-3">
            <!-- 侧边栏导航 -->
            <div class="card mb-4">
                <div class="card-header"><h4 class="mb-0">帮助中心</h4></div>
                <div class="list-group list-group-flush">
                    <a href="/help/faq/" class="list-group-item list-group-item-action active">常见问题</a>
                    <a href="/help/#shopping" class="list-group-item list-group-item-action">购物指南</a>
                    <a href="/help/#payment" class="list-group-item list-group-item-action">支付问题</a>
                    <a href="/help/#shipping" class="list-group-item list-group-item-action">配送问题</a>
                    <a href="/help/contact/" class="list-group-item list-group-item-action">联系我们</a>
                    <a href="/help/about/" class="list-group-item list-group-item-action">关于我们</a>
                    <a href="/help/terms/" class="list-group-item list-group-item-action">服务条款</a>
                    <a href="/help/privacy/" class="list-group-item list-group-item-action">隐私政策</a>
                </div>
            </div>
        </div>
        
        <div class="col-md-9">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">常见问题解答</h4>
                </div>
                <div class="card-body">
                    <div class="accordion" id="faqAccordion">
                        <!-- 基本问题 -->
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingOne">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                    什么是盲盒？
                                </button>
                            </h2>
                            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    <p>盲盒是一种包装形式，顾名思义就是在购买前无法知道具体内容的礼盒。每个盲盒系列都包含多种不同的款式，有常规款和隐藏款，购买后拆开才能知道获得了哪一款。</p>
                                    <p>盲盒的乐趣在于其随机性和惊喜感，您可能会收集到不同的款式或者抽中稀有的隐藏款，这也是盲盒收藏的乐趣所在。</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 账户相关 -->
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingTwo">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    如何注册和登录账户？
                                </button>
                            </h2>
                            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    <p><strong>注册账户：</strong></p>
                                    <ol>
                                        <li>点击网站右上角的"注册"按钮</li>
                                        <li>填写您的邮箱、密码和其他所需信息</li>
                                        <li>点击"注册"完成账户创建</li>
                                    </ol>
                                    <p><strong>登录账户：</strong></p>
                                    <ol>
                                        <li>点击网站右上角的"登录"按钮</li>
                                        <li>输入您的邮箱和密码</li>
                                        <li>点击"登录"即可访问您的账户</li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 订单相关 -->
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingThree">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                    如何查看我的订单？
                                </button>
                            </h2>
                            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    <p>登录账户后，点击右上角的用户菜单，选择"我的订单"选项即可查看您的所有订单记录和状态。在订单列表中，您可以：</p>
                                    <ul>
                                        <li>查看订单详情</li>
                                        <li>跟踪订单配送状态</li>
                                        <li>查看历史订单记录</li>
                                        <li>为未付款的订单进行支付</li>
                                        <li>取消符合条件的订单</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 盲盒相关 -->
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingFour">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                                    什么是我的盲盒？
                                </button>
                            </h2>
                            <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    <p>"我的盲盒"是您已购买但尚未开启的盲盒列表。您可以在用户菜单中点击"我的盲盒"选项查看，并可以随时点击"开盒"按钮查看盲盒内容。</p>
                                    <p>开盒后，系统会展示您获得的具体款式，您可以在"我的收藏"中查看所有已开启的盲盒收藏品。</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 支付相关 -->
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingFive">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                                    订单支付后多久发货？
                                </button>
                            </h2>
                            <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    <p>我们通常会在确认支付后的24小时内处理订单并安排发货。节假日期间可能会有所延迟，请以实际物流信息为准。</p>
                                    <p>订单发货后，系统会自动更新订单状态并发送物流信息通知，您可以在"我的订单"中随时查看物流进度。</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 退款相关 -->
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingSix">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                                    如何申请退款？
                                </button>
                            </h2>
                            <div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    <p>根据我们的退款政策：</p>
                                    <ul>
                                        <li>未发货订单：可以申请全额退款</li>
                                        <li>已发货未收到：需要确认物流状态后处理退款</li>
                                        <li>已收到货：由于盲盒的特殊性，除非产品有质量问题，否则不支持退款</li>
                                    </ul>
                                    <p>如需申请退款，请在"我的订单"中找到相应订单，点击"申请退款"按钮，并按照提示完成退款申请流程。</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 积分相关 -->
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingSeven">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
                                    如何使用和获取积分？
                                </button>
                            </h2>
                            <div id="collapseSeven" class="accordion-collapse collapse" aria-labelledby="headingSeven" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    <p><strong>获取积分：</strong></p>
                                    <ul>
                                        <li>消费1元获得1积分</li>
                                        <li>首次注册赠送100积分</li>
                                        <li>每日登录赠送5积分</li>
                                        <li>分享商品到社交媒体赠送10积分</li>
                                    </ul>
                                    <p><strong>使用积分：</strong></p>
                                    <p>您可以在积分商城中使用积分兑换商品或优惠券，也可以在结算时抵扣部分金额（100积分=1元）。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %} 